<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Natter 访客入口</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            line-height: 1.5;
            color: #333;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            padding: 0 20px;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .guest-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: none;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 0;
            max-width: 900px;
            width: 100%;
            margin: 20px auto;
            overflow: hidden;
        }

        .text-center {
            text-align: center;
        }

        .logo {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .logo::before {
            content: "🔒";
        }

        h2,
        h3 {
            margin-bottom: 1rem;
            color: #333;
        }

        .text-muted {
            color: #6c757d;
            margin-bottom: 1rem;
        }

        .login-form {
            margin-top: 2rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #333;
        }

        .form-control {
            width: 100%;
            border-radius: 15px;
            border: 2px solid #e9ecef;
            padding: 15px 20px;
            font-size: 16px;
            transition: all 0.3s ease;
            outline: none;
        }

        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn {
            display: inline-block;
            padding: 12px 24px;
            border: none;
            border-radius: 15px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            line-height: 1;
        }

        .btn-guest {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 100%;
        }

        .btn-guest:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
            color: white;
        }

        .btn-outline-secondary {
            background: transparent;
            border: 2px solid #6c757d;
            color: #6c757d;
            padding: 8px 16px;
            font-size: 14px;
        }

        .btn-outline-secondary:hover {
            background: #6c757d;
            color: white;
        }

        .btn-link {
            background: transparent;
            border: none;
            color: #667eea;
            text-decoration: none;
            padding: 8px 16px;
            font-size: 14px;
        }

        .btn-link:hover {
            color: #5a6fd8;
            text-decoration: underline;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 14px;
        }

        .back-link {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
            display: inline-block;
            margin-top: 1rem;
        }

        .back-link:hover {
            color: #5a6fd8;
        }

        .service-list {
            margin-top: 2rem;
        }

        .service-item {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            border: 1px solid #e9ecef;
            transition: all 0.3s ease;
        }

        .service-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .service-status {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-left: 10px;
        }

        .status-running {
            background: #d4edda;
            color: #155724;
        }

        .status-stopped {
            background: #f8d7da;
            color: #721c24;
        }

        .service-address {
            font-family: 'Courier New', monospace;
            background: #f8f9fa;
            padding: 8px 12px;
            border-radius: 8px;
            margin-top: 10px;
            word-break: break-all;
        }

        .d-flex {
            display: flex;
        }

        .justify-content-between {
            justify-content: space-between;
        }

        .align-items-center {
            align-items: center;
        }

        .align-items-start {
            align-items: flex-start;
        }

        .flex-grow-1 {
            flex-grow: 1;
        }

        .mb-1 {
            margin-bottom: 0.25rem;
        }

        .mb-2 {
            margin-bottom: 0.5rem;
        }

        .mb-3 {
            margin-bottom: 1rem;
        }

        .mb-4 {
            margin-bottom: 1.5rem;
        }

        .mb-0 {
            margin-bottom: 0;
        }

        .mt-2 {
            margin-top: 0.5rem;
        }

        .mt-3 {
            margin-top: 1rem;
        }

        .mt-4 {
            margin-top: 1.5rem;
        }

        .me-1 {
            margin-right: 0.25rem;
        }

        .me-2 {
            margin-right: 0.5rem;
        }

        .ms-3 {
            margin-left: 1rem;
        }

        .py-4 {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .alert-warning {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }

        .icon {
            display: inline-block;
            margin-right: 0.5rem;
        }

        .icon-users::before {
            content: "👥";
        }

        .icon-lock::before {
            content: "🔒";
        }

        .icon-arrow-left::before {
            content: "←";
        }

        .icon-arrow-right::before {
            content: "→";
        }

        .icon-exclamation::before {
            content: "⚠️";
        }

        .icon-play::before {
            content: "▶️";
        }

        .icon-stop::before {
            content: "⏹️";
        }

        .icon-link::before {
            content: "🔗";
        }

        .icon-info::before {
            content: "ℹ️";
        }

        .icon-clock::before {
            content: "🕒";
        }

        .icon-refresh::before {
            content: "🔄";
        }

        .icon-inbox::before {
            content: "📥";
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                justify-content: flex-start;
                padding: 10px;
            }

            .container {
                align-items: flex-start;
                padding: 0 10px;
            }

            .logo-section {
                margin: 5px 0;
            }

            .guest-card {
                padding: 0;
                margin: 10px;
                max-width: none;
                border-radius: 15px;
            }

            .guest-header {
                padding: 1.5rem 1rem;
            }

            .guest-header h1 {
                font-size: 1.5rem;
            }

            .guest-content {
                padding: 1rem;
            }

            .address-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .address-value {
                min-width: 100%;
                flex: none;
                padding: 12px;
                font-size: 14px;
            }

            .btn-copy {
                width: 100%;
                padding: 10px;
                font-size: 14px;
            }

            .info-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .service-item {
                padding: 1rem;
                margin-bottom: 0.75rem;
            }

            .service-header h5 {
                font-size: 1rem;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .logout-btn {
                font-size: 12px;
                padding: 6px 12px;
            }

            /* 增大触摸目标 */
            .btn {
                min-height: 44px;
                padding: 12px 20px;
            }

            .btn-refresh {
                width: 100%;
                justify-content: center;
            }

            /* 移动端快速操作按钮优化 */
            .quick-actions {
                bottom: 15px;
                right: 15px;
                gap: 8px;
            }

            .quick-btn {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }

            .service-nav {
                margin-bottom: 0.5rem;
            }

            .service-nav-container {
                padding: 0 0.5rem;
            }

            .quick-links-content {
                padding: 1.5rem;
                margin: 10px;
            }
        }

        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        .fade-out {
            animation: fadeOut 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }

        /* 状态图标样式 */
        .status-icon {
            margin-right: 8px;
            font-size: 1.2em;
        }

        .status-icon.running::before {
            content: "🟢";
        }

        .status-icon.stopped::before {
            content: "⚪";
        }

        /* 小号文本 */
        small {
            font-size: 0.875em;
            color: #6c757d;
        }

        .guest-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            text-align: center;
            position: relative;
        }

        .guest-header h1 {
            margin-bottom: 0.5rem;
            font-size: 2rem;
            font-weight: 600;
        }

        .guest-header .welcome-text {
            margin-bottom: 1rem;
            opacity: 0.9;
        }

        .header-actions {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .logout-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .guest-content {
            padding: 2rem;
        }

        .section-header {
            margin-bottom: 1.5rem;
        }

        .section-header h3 {
            color: #333;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            color: #666;
            font-size: 14px;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .services-list {
            min-height: 200px;
            margin-bottom: 1.5rem;
        }

        .service-item {
            background: white;
            border: 1px solid #e1e5e9;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .service-item:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        .service-header h5 {
            margin: 0 0 1rem 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.2rem;
        }

        .service-status {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 500;
        }

        .status-running {
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
            border: 1px solid #28a745;
        }

        .status-stopped {
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
            border: 1px solid #dc3545;
        }

        .address-info {
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .address-value {
            font-family: 'Courier New', monospace;
            background: #f8f9fa;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid #e1e5e9;
            flex: 1;
            min-width: 200px;
        }

        .btn-copy {
            background: #667eea;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-copy:hover {
            background: #5a6fd8;
        }

        .service-info {
            color: #666;
            font-size: 13px;
        }

        .loading-state,
        .empty-state,
        .error-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #666;
        }

        .loading-state .loading-spinner {
            margin-bottom: 1rem;
        }

        .empty-state span {
            display: block;
            margin-bottom: 1rem;
        }

        .error-state p {
            margin: 1rem 0;
        }

        .section-footer {
            text-align: center;
            padding-top: 1rem;
            border-top: 1px solid #e1e5e9;
        }

        .btn-refresh {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-refresh:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        }

        /* 通知样式 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 8px;
            color: white;
            z-index: 9999;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }

        .notification.success {
            background: #28a745;
        }

        .notification.error {
            background: #dc3545;
        }

        .notification.info {
            background: #17a2b8;
        }

        /* 快速跳转功能样式 */
        .quick-actions {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }

        .quick-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .quick-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .btn-back-to-top {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .btn-refresh-quick {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }

        .btn-menu {
            background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
        }

        /* 服务快速导航 */
        .service-nav {
            position: sticky;
            top: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #e1e5e9;
            padding: 10px 0;
            margin-bottom: 1rem;
            z-index: 100;
        }

        .service-nav-container {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 0 1rem;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .service-nav-container::-webkit-scrollbar {
            display: none;
        }

        .service-nav-item {
            flex-shrink: 0;
            padding: 6px 12px;
            background: #f8f9fa;
            border: 1px solid #e1e5e9;
            border-radius: 20px;
            font-size: 12px;
            color: #495057;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .service-nav-item:hover,
        .service-nav-item.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        /* 快速链接模态框 */
        .quick-links-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .quick-links-content {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .quick-links-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .quick-link-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border: 1px solid #e1e5e9;
            border-radius: 8px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .quick-link-item:hover {
            background: #f8f9fa;
            border-color: #667eea;
        }

        .quick-link-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #667eea;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 16px;
        }

        .quick-link-info {
            flex: 1;
        }

        .quick-link-title {
            font-weight: 600;
            margin-bottom: 2px;
        }

        .quick-link-desc {
            font-size: 12px;
            color: #666;
        }

        /* Logo区域样式 */
        .logo-section {
            width: 100%;
            text-align: center;
            margin: 10px 0;
            flex-shrink: 0;
        }

        .logo-section img {
            height: 48px;
            max-width: 90vw;
            filter: drop-shadow(0 2px 8px rgba(0, 230, 195, 0.3));
            transition: all 0.3s ease;
        }

        .logo-section img:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 4px 12px rgba(0, 230, 195, 0.5));
        }
    </style>
</head>

<body>
    <!-- Logo区域 -->
    <div class="logo-section">
        <img src="await-logo.svg" alt="Await Logo" onerror="this.style.display='none';">
    </div>

    <div class="container">
        <div class="guest-card fade-in">
            <div class="guest-header">
                <h1>🎯 Natter 访客系统</h1>
                <p class="welcome-text">欢迎访问服务列表</p>
                <div class="header-actions">
                    <button class="btn logout-btn" onclick="logout()">
                        🚪 退出登录
                    </button>
                </div>
            </div>

            <div class="guest-content">
                <!-- 服务快速导航 -->
                <div class="service-nav" id="service-nav" style="display: none;">
                    <div class="service-nav-container" id="service-nav-container">
                        <!-- 服务导航项将通过JavaScript动态生成 -->
                    </div>
                </div>

                <div class="services-section">
                    <div class="section-header">
                        <h3>📋 服务列表</h3>
                        <div class="info-row">
                            <span class="info-item">
                                <span class="icon icon-group"></span>
                                <span id="group-info">loading...</span>
                            </span>
                            <span class="info-item">
                                <span class="icon icon-clock"></span>
                                最后更新: <span id="last-update">--</span>
                            </span>
                        </div>
                    </div>

                    <div class="services-list" id="services-list">
                        <div class="loading-state">
                            <div class="loading-spinner"></div>
                            <span>加载服务列表中...</span>
                        </div>
                    </div>

                    <div class="section-footer">
                        <button class="btn btn-refresh" onclick="refreshServices()">
                            <span class="icon icon-refresh"></span>刷新
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速操作按钮 -->
        <div class="quick-actions">
            <button class="quick-btn btn-menu" onclick="showQuickLinks()" title="快速链接">
                ⚡
            </button>
            <button class="quick-btn btn-refresh-quick" onclick="refreshServices()" title="刷新服务">
                🔄
            </button>
            <button class="quick-btn btn-back-to-top" onclick="scrollToTop()" title="返回顶部">
                ⬆️
            </button>
        </div>

        <!-- 快速链接模态框 -->
        <div class="quick-links-modal" id="quick-links-modal" onclick="hideQuickLinks()">
            <div class="quick-links-content" onclick="event.stopPropagation()">
                <div class="quick-links-header">
                    <h4>🚀 快速链接</h4>
                    <p style="margin: 0; color: #666; font-size: 14px;">选择要访问的服务</p>
                </div>
                <div id="quick-links-list">
                    <!-- 快速链接项将通过JavaScript动态生成 -->
                </div>
                <div style="text-align: center; margin-top: 1rem;">
                    <button class="btn btn-outline-secondary" onclick="hideQuickLinks()">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentGroupId = null;
        let currentGroupName = '';
        let currentGroupDescription = '';

        // 页面加载时检查登录状态
        window.addEventListener('load', function () {
            // 检查访客登录状态
            const groupId = localStorage.getItem('guest_group_id');
            const groupName = localStorage.getItem('guest_group_name');

            if (!groupId) {
                // 未登录，跳转到登录页面
                window.location.href = '/login.html';
                return;
            }

            // 设置全局变量
            currentGroupId = groupId;
            currentGroupName = groupName;

            // 更新页面标题和欢迎信息
            document.title = `Natter 访客系统 - ${groupName}`;
            document.querySelector('.welcome-text').textContent = `欢迎访问 ${groupName} 服务列表`;
            document.getElementById('group-info').textContent = groupName;

            // 加载对应分组的服务
            loadServices();
        });

        // 加载服务列表
        async function loadServices() {
            if (!currentGroupId) return;

            try {
                showLoading(true);

                const response = await fetch(`/api/guest/services?group_id=${currentGroupId}`);
                const result = await response.json();

                if (response.ok && result.services) {
                    displayServices(result.services || []);
                    updateLastUpdateTime();
                } else {
                    showError(result.error || '加载服务列表失败');
                }
            } catch (error) {
                console.error('加载服务列表失败:', error);
                showError('网络错误，请稍后重试');
            } finally {
                showLoading(false);
            }
        }

        // 显示服务列表
        function displayServices(services) {
            const servicesList = document.getElementById('services-list');

            if (services.length === 0) {
                servicesList.innerHTML = `
                    <div class="empty-state">
                        <span class="icon icon-inbox" style="font-size: 3rem; opacity: 0.3;"></span>
                        <p>此分组暂无服务</p>
                    </div>
                `;
                hideServiceNav();
                return;
            }

            let html = '';
            services.forEach((service, index) => {
                const statusClass = service.status === '运行中' ? 'status-running' : 'status-stopped';
                const statusIcon = service.status === '运行中' ? '🟢' : '🔴';

                html += `
                    <div class="service-item" id="service-${service.id}">
                        <div class="service-header">
                            <h5>
                                ${statusIcon} ${service.remark || `服务 ${service.id}`}
                                <span class="service-status ${statusClass}">${service.status}</span>
                            </h5>
                        </div>
                        
                        <div class="service-details">
                            ${service.mapped_address && service.mapped_address !== '无' ? `
                                <div class="address-info">
                                    <strong>🔗 访问地址:</strong> 
                                    <span class="address-value">${service.mapped_address}</span>
                                    <button class="btn btn-small btn-copy" onclick="copyAddress('${service.mapped_address.replace(/'/g, "\\'")}')">
                                        📋 复制
                                    </button>
                                </div>
                            ` : `
                                <div class="address-info text-muted">
                                    ⏳ 等待分配访问地址...
                                </div>
                            `}
                            
                            <div class="service-info">
                                <small>
                                    🏠 LAN: ${service.lan_status || '未知'} | 
                                    🌍 WAN: ${service.wan_status || '未知'} | 
                                    🔀 NAT: ${service.nat_type || '未知'}
                                </small>
                            </div>
                        </div>
                    </div>
                `;
            });

            servicesList.innerHTML = html;

            // 生成服务导航
            generateServiceNav(services);
            // 缓存服务数据用于快速链接
            window.cachedServices = services;
        }

        // 生成服务快速导航
        function generateServiceNav(services) {
            const serviceNav = document.getElementById('service-nav');
            const serviceNavContainer = document.getElementById('service-nav-container');

            if (services.length <= 3) {
                hideServiceNav();
                return;
            }

            let navHtml = '';
            services.forEach((service, index) => {
                const serviceName = service.remark || `服务 ${service.id}`;
                const shortName = serviceName.length > 10 ? serviceName.substring(0, 10) + '...' : serviceName;
                const statusIcon = service.status === '运行中' ? '🟢' : '🔴';

                navHtml += `
                    <div class="service-nav-item" onclick="scrollToService('${service.id}')" title="${serviceName}">
                        ${statusIcon} ${shortName}
                    </div>
                `;
            });

            serviceNavContainer.innerHTML = navHtml;
            serviceNav.style.display = 'block';
        }

        // 隐藏服务导航
        function hideServiceNav() {
            const serviceNav = document.getElementById('service-nav');
            serviceNav.style.display = 'none';
        }

        // 滚动到指定服务
        function scrollToService(serviceId) {
            const serviceElement = document.getElementById(`service-${serviceId}`);
            if (serviceElement) {
                // 高亮当前导航项
                document.querySelectorAll('.service-nav-item').forEach(item => {
                    item.classList.remove('active');
                });
                event.target.classList.add('active');

                // 滚动到服务项
                serviceElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });

                // 短暂高亮服务项
                serviceElement.style.transform = 'scale(1.02)';
                serviceElement.style.boxShadow = '0 8px 25px rgba(102, 126, 234, 0.3)';
                setTimeout(() => {
                    serviceElement.style.transform = '';
                    serviceElement.style.boxShadow = '';
                }, 1000);
            }
        }

        // 返回顶部
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // 显示快速链接模态框
        function showQuickLinks() {
            const modal = document.getElementById('quick-links-modal');
            const quickLinksList = document.getElementById('quick-links-list');

            if (!window.cachedServices || window.cachedServices.length === 0) {
                quickLinksList.innerHTML = `
                    <div style="text-align: center; padding: 2rem; color: #666;">
                        <p>暂无可用的服务链接</p>
                    </div>
                `;
            } else {
                let quickLinksHtml = '';
                window.cachedServices.forEach(service => {
                    const serviceName = service.remark || `服务 ${service.id}`;
                    const statusIcon = service.status === '运行中' ? '🟢' : '🔴';
                    const hasAddress = service.mapped_address && service.mapped_address !== '无';

                    quickLinksHtml += `
                        <div class="quick-link-item" onclick="${hasAddress ? `openServiceLink('${service.mapped_address}')` : ''}">
                            <div class="quick-link-icon">
                                ${statusIcon}
                            </div>
                            <div class="quick-link-info">
                                <div class="quick-link-title">${serviceName}</div>
                                <div class="quick-link-desc">
                                    ${hasAddress ? service.mapped_address : '等待分配地址...'}
                                </div>
                            </div>
                        </div>
                    `;
                });
                quickLinksList.innerHTML = quickLinksHtml;
            }

            modal.style.display = 'flex';
            setTimeout(() => {
                modal.style.opacity = '1';
            }, 10);
        }

        // 隐藏快速链接模态框
        function hideQuickLinks() {
            const modal = document.getElementById('quick-links-modal');
            modal.style.opacity = '0';
            setTimeout(() => {
                modal.style.display = 'none';
            }, 300);
        }

        // 打开服务链接
        function openServiceLink(address) {
            // 处理不同协议的地址
            let url = address;
            if (address.startsWith('tcp://')) {
                // TCP地址转换为HTTP
                url = address.replace('tcp://', 'http://');
            } else if (!address.startsWith('http://') && !address.startsWith('https://')) {
                // 如果没有协议，默认添加http://
                url = 'http://' + address;
            }

            window.open(url, '_blank');
            hideQuickLinks();
            showNotification('正在打开服务链接...', 'info');
        }

        // 显示加载状态
        function showLoading(loading) {
            const servicesList = document.getElementById('services-list');
            if (loading) {
                servicesList.innerHTML = `
                    <div class="loading-state">
                        <div class="loading-spinner"></div>
                        <span>加载服务列表中...</span>
                    </div>
                `;
            }
        }

        // 显示错误信息
        function showError(message) {
            const servicesList = document.getElementById('services-list');
            servicesList.innerHTML = `
                <div class="error-state">
                    <span class="icon icon-exclamation" style="font-size: 2rem; color: #dc3545;"></span>
                    <p>${message}</p>
                    <button class="btn btn-secondary" onclick="loadServices()">重试</button>
                </div>
            `;
        }

        // 刷新服务列表
        async function refreshServices() {
            await loadServices();
        }

        // 复制地址到剪贴板
        function copyAddress(address) {
            navigator.clipboard.writeText(address).then(() => {
                showNotification('地址已复制到剪贴板', 'success');
            }).catch(() => {
                // 备用方法
                const textArea = document.createElement('textarea');
                textArea.value = address;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showNotification('地址已复制到剪贴板', 'success');
            });
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.add('show');
            }, 100);

            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 退出登录
        function logout() {
            // 清除登录信息
            localStorage.removeItem('guest_group_id');
            localStorage.removeItem('guest_group_name');

            // 跳转到登录页面
            window.location.href = '/login.html';
        }

        // 更新最后更新时间
        function updateLastUpdateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('last-update').textContent = timeString;
        }

        // 定时刷新服务状态（每30秒）
        setInterval(() => {
            if (currentGroupId) {
                refreshServices();
            }
        }, 30000);
    </script>
</body>

</html>